<template>
  <div style="padding: 8px;">
    <el-card>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="公告名称">
          <el-input size="small" v-model="formInline.announcementTitle" placeholder="公告名称"></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('创建时间')">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formInline.createTime" size="small" type="datetime"
            :placeholder="$t('选择日期时间')">
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
          <el-button size="small" type="primary" @click="reSet">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card v-loading="loading" style="margin-top: 8px;">
      <el-button size="small" style="margin-bottom: 8px;" type="primary" @click="addShow">新增公告</el-button>
      <el-table :data="tableData" style="width: 100%">
        <!-- <el-table-column type="selection" width="55">
        </el-table-column> -->
        <el-table-column prop="announcementTitle" width="120" label="公告名称">
        </el-table-column>
        <el-table-column prop="contentChineseTraditional" label="公告中文内容">
        </el-table-column>
        <el-table-column prop="contentEnglish" label="公告英文内容">
        </el-table-column>
        <el-table-column width="100" prop="status" label="状态">
          <template #default="{ row }">
            <span>{{ row.status ? '正常' : "禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200" prop="createTime" label="创建时间">
        </el-table-column>
        <el-table-column width="100" label="操作">
          <template #default="{ row }">
            <el-button style="display: inline;" type="text" size="mini" @click="edit(row)">编辑</el-button>
            <el-button style="display: inline;" type="text" size="mini" @click="del(row.id)"><span
                style="color: red;">删除</span></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right;margin: 5px 0;" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </el-card>
    <el-dialog :title="`${dialogform.id ? '公告编辑' : '公告添加'}`" :visible.sync="dialogVisible" width="30%"
      :before-close="handleClose">
      <el-form ref="form" :rules="rules" label-position="right" label-width="100px" :model="dialogform">
        <el-form-item prop="announcementTitle" label="公告名称">
          <el-input v-model="dialogform.announcementTitle"></el-input>
        </el-form-item>
        <el-form-item prop="contentChineseTraditional" label="中文内容">
          <el-input type="textarea" :rows="1" v-model="dialogform.contentChineseTraditional"></el-input>
        </el-form-item>
        <el-form-item prop="contentEnglish" label="英文内容">
          <el-input type="textarea" :rows="2" v-model="dialogform.contentEnglish"></el-input>
        </el-form-item>
        <el-form-item prop="status" label="状态">
          <el-switch v-model="dialogform.status" active-value="0" inactive-value="1" active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getAnnouncementApi, editAnnouncementApi, deleteAnnouncementApi, addAnnouncementApi } from "@/api/appuser/announcement.js"
export default {
  data() {
    return {
      loading: false,
      tableData: [{}],
      formInline: {
        announcementTitle: null,
        createTime: null
      },
      dialogVisible: false,
      dialogform: {
        announcementTitle: "",
        contentChineseTraditional: "",
        contentEnglish: "",
        status: '0'
      },
      rules: {
        announcementTitle: [
          { required: true, message: '请输入公告名称', trigger: 'blur' },
        ],
        contentChineseTraditional: [
          { required: true, message: '请输入公告中文内容', trigger: 'blur' },
        ],
        contentEnglish: [
          { required: true, message: '请输入公告英文内容', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' },
        ]
      },
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 10,
      }
    };
  },
  created() {
    this.getAnnouncement()
  },
  methods: {
    onSubmit() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
      }
      this.getAnnouncement()
    },
    async save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.dialogform.id) {
            await editAnnouncementApi({
              id: this.dialogform.id,
              announcementTitle: this.dialogform.announcementTitle,
              contentChineseTraditional: this.dialogform.contentChineseTraditional,
              contentEnglish: this.dialogform.contentEnglish
            })
            this.$message.success('编辑成功')
          } else {
            await addAnnouncementApi({
              announcementTitle: this.dialogform.announcementTitle,
              contentChineseTraditional: this.dialogform.contentChineseTraditional,
              contentEnglish: this.dialogform.contentEnglish
            })
            this.$message.success('添加成功')
          }
          this.handleClose()
          this.getAnnouncement()
        } else {
          return false;
        }
      });

    },
    cancel() {
      this.handleClose()
    },
    async getAnnouncement() {
      this.loading = true
      const res = await getAnnouncementApi({
        ...this.page,
        ...this.formInline
      })
      console.log(res);
      this.tableData = res.rows
      this.total = res.total
      this.loading = false
    },
    reSet() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
      }
      this.formInline = {
        announcementTitle: null,
        createTime: null
      }
      this.getAnnouncement()
    },
    edit(row) {
      console.log(row);
      this.dialogform = row
      this.dialogVisible = true
    },
    async del(id) {
      this.$confirm('是否删除此公告', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await deleteAnnouncementApi(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getAnnouncement()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
        this.getAnnouncement()
      });
    },
    handleClose() {
      this.dialogform = {
        announcementTitle: "",
        contentChineseTraditional: "",
        contentEnglish: "",
        status: 0
      }
      this.$refs.form.resetFields();
      this.dialogVisible = false
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getAnnouncement();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getAnnouncement();
    },
    addShow() {
      this.dialogVisible = true
    },
    // handleSelectionChange(val) {
    //   console.log(val);
    // }
  },
};
</script>
<style lang='' scoped>
</style>